var vm = new Vue({
    el: "#mainIndex",
    data: {
        ctx: ctx,
        myChart:'',
        option:'',
        options:'',
        myCharts:'',
        opt:{},
        mapData: [
            {name: '广州市', value: 20},
            {name: '韶关市', value: 23},
            {name: '深圳市', value: 22},
            {name: '珠海市', value: 10},
            {name: '汕头市', value: 12},
            {name: '佛山市', value: 14},
            {name: '江门市', value: 2},
            {name: '湛江市', value: 0},
            {name: '茂名市', value: 0},
            {name: '肇庆市', value: 40},
            {name: '惠州市', value: 55},
            {name: '梅州市', value: 77},
            {name: '汕尾市', value: 90},
            {name: '河源市', value: 22},
            {name: '阳江市', value: 6},
            {name: '清远市', value: 2},
            {name: '东莞市', value: 5},
            {name: '中山市', value: 8},
            {name: '潮州市', value: 8},
            {name: '揭阳市', value: 62},
            {name: '云浮市', value: 11},
            {name: '东沙群岛', value: 20}
        ]
    },
    created: function () {
        this.init();
    },
    mounted: function () {

    },
    methods: {
        init:function(){
            this.initMapData();
            // this.initShadowData();
        },
        zfbPay: function () {
            window.open("/zzh/pay/zfbPay.html", "_blank")
        },
        wxPay: function () {
            window.open("/zzh/pay/wxPay.html", "_blank")
        },
        ylPay: function () {

        },
        initMapData: function () {
            var vm = this;
            vm.option = {
                title: {
                    text: '办件情况概览',
                    left: '30',
                    textStyle: {
                        color: '#000'
                    }
                    ,top:30
                },
                tooltip: { //鼠标悬浮时区域提示框
                    trigger: 'item',
                    textStyle: {
                        fontSize: 18
                    },
                    formatter: function (params) {
                        console.log(params)
                        console.log(vm.option)
                        var dataMap = vm.option.series[0];
                        for (var i = 0; i < dataMap.data.length; i++) {
                            if (dataMap.data[i].name == params.name) {
                                if (isNaN(dataMap.data[i].value)) { //没有数据时显示-
                                    return params.name + "<br/>办件数：-";
                                } else {
                                    return params.name + "<br/>办件数：" + dataMap.data[i].value + "个";
                                }
                            }
                        }
                    }
                },
                visualMap: [{
                    left: 30,
                    bottom: 270,
                    show: true,
                    type: 'piecewise',
                    pieces: [
                        {
                            min: 100,
                            label: ">" + 100 + "个"
                        },
                        {
                            min: 50,
                            max: 80,
                            label: 50 + "-" + 80 + "个"
                        },
                        {
                            min: 30,
                            max: 50,
                            label: 30 + "-" + 50 + "个"
                        },
                        {
                            min: 1,
                            max: 30,
                            label: 1 + "-" + 30 + "个"
                        },
                        {
                            min: 0,
                            max: 0
                        }
                    ],
                    color: ['#58A9E9', '#5ab1ed', '#5ac0f4', '#5cd1f6', '#62e1f6'],
                    textStyle: {
                        color: '#C0C0C0',
                        fontSize: 18,
                        fontFamily: '微软雅黑'

                    }
                }
                ],
                series: [
                    {
                        name: '2018',
                        type: 'map',
                        left: '100',
                        top: '0',
                        zoom: 1,
                        data: vm.mapData,
                        itemStyle: {
                            normal: {
                                borderColor: '#fff', //边界线颜色
                                borderWidth: 2, //边界线大小
                                label: {
                                    color: '#C55200',//区域名称颜色
                                    show: true,
                                    fontWeight: 'bold'
                                }
                            },
                            emphasis: {
                                label: {
                                    color: '#638b36',
                                    show: true
                                }
                            },
                        }
                    }
                ]
            };
            console.log("1112"+vm.option);
            var name = '广东省';
            request('', {
                url:  '/common/json/guangdong.json',
                type: 'get',
            }, function (res) {
                var data = res;
                echarts.registerMap("'" + name + "'", data); //注册地图
                vm.myChart = echarts.init(document.getElementById('cityMap'));
                // myChart.showLoading();
                vm.myChart.setOption(vm.option, false, true);
                window.addEventListener("resize", function () { //浏览器大小调整echarts随之改变
                    vm.myChart.resize();
                });
                vm.myChart.on('click', function (params) { //地图区域点击时的联动   根据params的值来联动对应数据
                    // //点击跳转
                    // var res = document.getElementById('app_frame2');
                    // //跳转市区数据页面
                    // $(res).load(ctx + "tzpt/main/toAreaData/"+params.name);
                });
                // vm.myChart.hideLoading(); //关闭加载动画
                $.extend(true, vm.opt, {
                    series: {
                        map: "'" + name + "'",
                        data: vm.mapData
                    }
                });
                vm.myChart.setOption(vm.opt);
            }, function () {
                vm.$message.error('获取失败，请重试！');
            })
        },
        initShadowData: function () {
            var vm = this;
            vm.options = {
                //画布背景色设置
                backgroundColor: "#f1f1f1",
                title: {
                    text: "这个是主标题",
                    textStyle: {
                        //设置主标题字体颜色
                        color: "#90E5E7"
                    },
                    subtext: "这个是副标题"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ["分类一", "分类二"]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // calculable: true,
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            //y轴
                            show: false
                        },
                        axisTick: {
                            //刻度线
                            show: false
                        },
                        splitLine: {
                            //网格线
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: "蒸发量",
                        type: "bar",
                        //设置柱状图宽度
                        barWidth: "13",
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle: {
                            normal: {
                                //柱形图圆角，顺时针左上，右上，右下，左下）
                                barBorderRadius: [12, 12, 12, 12]
                                //设置柱状图颜色渐变
                                // color: {
                                //     type: 'radial',
                                //     x: 0.5,
                                //     y: 0.5,
                                //     r: 0.5,
                                //     colorStops: [{
                                //         offset: 0, color: 'red' // 0% 处的颜色
                                //     }, {
                                //         offset: 1, color: 'blue' // 100% 处的颜色
                                //     }],
                                //     global: false // 缺省为 false
                                // }
                            }
                        }
                    },
                    {
                        name: "降水量",
                        type: "bar",
                        //设置柱状图宽度
                        barWidth: "13",
                        //柱状图间距
                        barGap:"200%",
                        data: [26.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 26.3],
                        itemStyle: {
                            normal: {
                                // 统一设置四个角的圆角大小
                                barBorderRadius: 12
                                //设置柱状图颜色渐
                                // color: {
                                //     type: 'radial',
                                //     x: 0.5,
                                //     y: 0.5,
                                //     r: 0.5,
                                //     colorStops: [{
                                //         offset: 0, color: 'red' // 0% 处的颜色
                                //     }, {
                                //         offset: 1, color: 'blue' // 100% 处的颜色
                                //     }],
                                //     global: false // 缺省为 false
                                // }
                            }
                        }
                    }
                ]
            };
            vm.myCharts = echarts.init(document.getElementById('dataMap'));
            console.log("222"+vm.options)
            vm.myCharts.setOption(vm.options);
        }
    },
    filters: {
        formatDate: function(time) {
            if(!time) return "";
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');
        }
    }
})
